<template>
  <div class="my-contract actWrap">
    <!-- <tab :line-width="2" v-model="index">
      <tab-item @on-item-click="getList(0)" selected>待签约</tab-item>
      <tab-item @on-item-click="getList(1)">待处理</tab-item>
      <tab-item @on-item-click="getList(1)">已签约</tab-item>
    </tab> -->
    <ul class="Li">
      <li class="Li__item" v-for="(item, index) in dataList" :key="index">
        <div class="Li_item__i">
          <div class="i">
            <h4 class="i__left">
              <img class="avatar" :src="avatarUrl" alt="">
              <span class="l__title">{{trueName}}</span>
            </h4>
            <h4 class="i__status">{{status2txt(item.status)}}</h4>
          </div>
        </div>
        <house-list v-if="item.housePerson" :houseInfo="item.housePerson" :detailPath="item.houseType === 2 ? '/apartmentDetail' : '/detail'" twoLable="true" class="contract-house">
        </house-list>

        <div class="txt-describe">
          <p class="clearfix"><span>签订日期:</span><span class="f-r">{{item.createTimeStr}}</span></p>
          <p class="clearfix"><span>合同编号:</span><span class="f-r">{{item.contract_no}}</span></p>
          <p class="clearfix"><span>签订期限:</span><span class="f-r">{{tenancyTerm2txt(item.tenancy_term)}}</span></p>
        </div>
        <div class="bt-container">
          <x-button v-if="item.status === 2" @click.native="refundRent(item.id)" class="theme-bt bt-c bt-red" mini>退 租</x-button>
          <x-button v-if="item.is_continue === 1" @click.native="renewRent(item.housePersons)"  class="theme-bt bt-c" mini>续 租</x-button>
          <x-button @click.native="showDetail(item.id)"  class="theme-bt bt-c bt-gray" mini>详 情</x-button>
        </div>
      </li>
    </ul>
    <nodata v-show="noData"></nodata>
    <!-- 合同详情 -->
    <div v-show="showDialog" class="v_show_contract" :class="{'tips-dialog': true}">
      <section class="tips-dialog render__contract__dialog">
        <div class="body" id="contract">
          <div class="topBack"><span  @click="showDialog = false" > &lt; </span>合同详情</div>
          <div v-html="contractDetail.replace('\r\n', '')"></div>
        </div>
        <div class="btn-close" @click="showDialog = false"></div>
      </section>
    </div>
  </div>
</template>

<script>
import contractList from '@/components/contractList.vue'
import xdialog from '@/components/x-dialog'
import { Confirm } from 'vux'
import houseList from '@/components/houseList'
export default {
  name: 'my-contract',
  components: {
    contractList,
    xdialog,
    Confirm,
    houseList
  },
  data () {
    return {
      dataList: [],
      index: 0,
      page: 1,
      pageSize: 10,
      noData: false,
      showDialog: false,
      contractDetail: '',
      trueName: JSON.parse(window.localStorage.getItem('userInfo') || '{}').trueName,
      avatarUrl: ''
    }
  },
  created () {
    this.getList(0)
    let imgUrl = localStorage.getItem('headUrlImg')
    !imgUrl || imgUrl === 'undefined' ? this.avatarUrl = require('../../../images/avatar_default.png') : this.avatarUrl = imgUrl
  },
  methods: {
    getList (index) {
      this.$axiosPosting(this.$api.queryNewContractByRenter, {
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === '0000') {
          res.data && (this.dataList = res.data.list)
          res.data.list && res.data.list.length < 1 && (this.noData = true)
        } else {
          this.noData = true
          this.$vux.toast.text(res.msg)
        }
      })
    },
    // 退租
    refundRent (contractId) {
      let cancelContract = () => {
        this.$axiosPosting(this.$api.applyForCancel, {contractId}).then(res => {
          if (res.code === '0000') {
            this.$vux.toast.text('退租申请已提交')
          } else {
            this.$vux.toast.text(res.msg)
          }
          this.getList()
        })
      }

      this.$vux.confirm.show({
        title: '确定要申请退租吗？',
        content: '退租会扣除违约金，建议先联系房东，协商后再发起退租申请。',
        confirmText: '确 定',
        cancelText: '取 消',
        onConfirm () {
          // 提交房东确认，合同状态变为退租中
          cancelContract()
        }
      })
    },
    // 续租
    renewRent (houseObj) {
      let houseInfo = {
        houseId: houseObj.id, // 房源id
        houseTitle: houseObj.houseTitle, // 房源标题
        address: houseObj.address, // 地址
        highlights: houseObj.highlights, // 亮点
        area: houseObj.area, // 面积
        rentalPrice: houseObj.rentalPrice, // 价格
        partyAId: houseObj.landlordId, // 房东id
        coverImg: houseObj.coverImg, // 封面图
        betPrice: houseObj.betPrice || 0, // 押金
        betNum: houseObj.betNum, // 押金方式
        isFreebet: houseObj.isFreebet, // 是否免押
        createTime: houseObj.createTime // 发布时间
      }
      window.localStorage.setItem('signHouseInfo', JSON.stringify(houseInfo))
      this.$router.push('/infoConfirm')
    },
    // 详情
    showDetail (contractId) {
      this.showDialog = true
      document.body.scrollTop = 0
      document.documentElement.scrollTop = 0
      this.$axiosPosting(this.$api.queryNewContractHT, {
        id: contractId
      }).then(res => {
        if (res.code === '0000') {
          this.contractDetail = res.data.detail
        }
      })
    },
    // 联系房东
    contactLandlor (landlordId) {
      let virtualNum = ''
      let mobileTo = ''
      this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
        if (res.code === '0000') {
          mobileTo = res.data.mobile
          step2()
        }
      })
      const step2 = () => {
        let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
        let mobileFor = userInfo ? userInfo.mobile : ''
        if (mobileFor) {
          if (virtualNum === '') {
            this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
              let data = ''
              if (res.code === '0000') {
                data = JSON.parse(res.data)
              }
              if (res.code === '0000' && data.errorCode === '0') {
                virtualNum = data.virtualNum
                window.location.href = `tel:${virtualNum}`
              } else {
                this.$vux.toast.text('无法获取房东电话')
                virtualNum = ''
              }
            })
          } else {
            window.location.href = `tel:${virtualNum}`
          }
        } else {
          this.$router.replace('/login')
        }
      }
    },
    // 合同状态（“待房东确认”和“已过期”状态的合同在列表中不展示，后台接口处理）
    status2txt (status) {
      if (status === 1) return '待房东确认'
      else if (status === 2) return '合同生效'
      else if (status === 3) return '已过期'
      else if (status === 4) return '退租中'
      else if (status === 5) return '已退租'
      else return ''
    },
    // 签订期限
    tenancyTerm2txt (tenancyTerm) {
      let txt = ''
      switch (tenancyTerm) {
        case 1: txt = '一个月'; break
        case 2: txt = '三个月'; break
        case 3: txt = '半年'; break
        case 4: txt = '一年'; break
        default: txt = ''
      }
      return txt
    }
  }
}
</script>

<style lang="less">
.my-contract {
  .btn {
    width: 50px;
    height: 26px;
    line-height: 26px;
    background: #ff9600;
    display: inline-block;
    border: 1px solid #ff9600;
    text-align: center;
    color: white;
    border-radius: 2px;
    margin-left: 5px;
    font-size: 14px;
  }
}
</style>
<style lang="less" scoped>
ul.Li{
  .Li__item{
    position: relative;
    border-bottom: 6px solid #f4f4f4;
    .bt-container{
      text-align: right;
      padding: 16px;
    }
    .Li_item__i{
      display: flex;
      font-size: 12px;
      align-items: center;
      border-bottom: 0.5px solid #f4f4f4;
      .time {
        font-size: 12px;
      }
      .i{
        padding: 12px 10px;
        display: flex;
        flex-wrap: wrap;
        .i__left{
          width: 100%;
          padding-right: .5rem;
          line-height: 1rem;
          line-height: 20px;
          .l__title {
            color: #333;
            font-size: 13px;
          }
        }
        .i-button {
          color: #989898;
          line-height: 24px;
          span:nth-of-type(2) {
            padding-left: 1rem;
          }
        }
      }
      .i__status{
        position: absolute;
        // top: 10px;
        padding-top: 1px;
        font-size: 14px;
        right: 0.65rem;
        line-height: 18px;
        text-align: center;
        color:#ff9600;
      }
    }
  }
}
.v_show_contract {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100vw;
  min-height: 100vh;
  height: auto !important;
  overflow-y: auto !important;
  background: white;
}
.topBack {
  height: 45px;
  width: 110%;
  background: #007eff;
  text-align: center;
  line-height: 45px;
  position: fixed;
  left: -15px;
  z-index: 2;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  top: 0px;
  span{
    position: absolute;
    top: 0px;
    left: 20px;
    font-size: 25px;
    display: block;
    padding: 0 10px;
  }
}
.tip {
  margin-top: 0px;
  padding: 14px 20px 0 32px;
  font-size: 13px;
  line-height: 1.8;
  position: relative;
  color: #999;
  padding-bottom: 12px;
  background: white;
  opacity: 0;
  transition: all 3s;
 .weui-icon-warn {
    font-size: 18px;
    color: #ff8a00;
    position: absolute;
    left: 3px;
    top: 16px;
  }
}
.tips-dialog .body {
  padding: 0 15px 15px;
}
.dockBottom {
  position: absolute;
  bottom: 0;
}
@media (max-width: 330px) {
  .dockBottom {
    position: relative;
    bottom: auto;
  }
}
.fadeOut {
  opacity: 1;
}
.contract-house {
  padding-left: 18px;
  background: #f8f8f8;
}
.txt-describe {
  padding: 7px 18px 0;
  span {
    float: left;
    display: inline-block;
    font-size: 12px;
    color: #777;
    line-height: 20px;
  }
  .f-r {
    float: right;
    color: #333;
  }
}
.bt-c {
  line-height: 29px;
}
.bt-red {
  color: #d4323f;
  border: 1px solid #d4323f;
}
.bt-gray {
  color: #999;
  border-color: #999;
}
.weui-btn_mini {
  padding: 0 20px;
  font-size: 12px;
}
.weui-btn {
  margin: 6px 0 0 5px;
}
.avatar {
  margin: 0 7px 0 15px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>
